<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>闭包</title>

    <style>
      .outer {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background-color: pink;
        text-align: center;
      }

      .inner1 {
        background-color: blue;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }

      .inner2 {
        background-color: red;
        width: 100px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <script>
      var data = [];
      for (var i = 0; i < 3; i++) {
        (data[i] = function () {
          console.log(i);
        })(i);
      }
      var x = data[0];
      // console.log(data);
      // console.log(x);
      // data[1]();
      // data[2]();
    </script>

    <script>
      var data1 = [];
      for (var i = 0; i < 3; i++) {
        (function (i) {
          setTimeout(() => {
            data1[i] = function () {
              console.log(i);
            };
          }, 0);
        })(i);
      }
      console.log(data1);

      setTimeout(() => {
        data1[0]();
        data1[1]();
        data1[2]();
      }, 100);

      var module = (function () {
        let count = 0;
        function changeCount(val) {
          return count + val;
        }
        return {
          add: (val) => {
            return changeCount(1);
          },
          reduce: (val) => {
            return changeCount(-1);
          },
          value: () => count,
        };
      })();

      console.log(module.value());
      console.log(module.add());
      console.log(module.value());
      console.log(module.reduce());
      console.log(module.value());

      function Graph() {
        this.vertices = [];
        this.edges = [];
      }

      // Graph.prototype.addVertex= function (v) {
      //   this.vertices.push(v);
      // };

      var g = new Graph();
      console.log(g);
      console.log(g.__proto__);
      console.log( Object.getPrototypeOf(g));
      console.log( g.__proto__ === Object.getPrototypeOf(g));
      console.log(g.__proto__.constructor.__proto__);
      console.log(g.__proto__.constructor.__proto__.constructor);
    </script>

    <!-- <script>
      var data2 = [];
      for (let i = 0; i < 3; i++) {
        data2[i] = function () {
          console.log(i);
        };
      }
      console.log(data2);
      data2[0]();
      data2[1]();
      data2[2]();
    </script> -->
  </body>
</html>
